<template>
  <div class="header">
    <div class="header-block">
      <div class="info-block">
        <div class="area">肃州区</div>
        <img src="@/assets/images/weather.png" class="weather-icon" alt="">
        <div class="weather-text">晴转多云</div>
        <div class="temperature">13℃</div>
      </div>
      <div class="title" @click="$router.push('/index')">{{title}}</div>
      <div class="info-block">
        <div class="date">{{date}}</div>
        <div class="week">{{week}}</div>
        <div class="time">{{time}}</div>
      </div>
    </div>
    <div class="menu-block">
      <div class="menu-list">
        <div :class="path==='/home'?'active':''" @click="$router.push('/home')" class="menu-item">基础数据中心</div>
        <div :class="path==='/adjust'?'active':''" @click="$router.push('/adjust')" class="menu-item">矛盾纠纷调解</div>
        <div :class="path==='/building'?'active':''" @click="$router.push('/building')" class="menu-item">综治中心队伍</div>
      </div>
      <div class="menu-list">
        <div :class="path==='/management'?'active':''" @click="$router.push('/management')" class="menu-item">综治服务中心</div>
        <div :class="path==='/morality'?'active':''" @click="$router.push('/morality')" class="menu-item">道德法治宣防</div>
        <div :class="path==='/lecture'?'active':''" @click="$router.push('/lecture')" class="menu-item">Deepseek 法律AI讲堂</div>
      </div>
    </div>
  </div>
</template>
<script>
import getPageTitle from '@/utils/get-page-title'
import { getCurrentTime, getWeek } from '@/utils/utils'

export default {
  name: 'Header',
  data(){
    return{
      title:getPageTitle(),
      date:'',
      week:'',
      time:'',

      timer:null,
    }
  },
  computed:{
    path(){
      return this.$route.path;
    }
  },
  methods:{
    setDateTime(){
      const dateTimeStr=getCurrentTime();
      this.date=dateTimeStr.slice(0,10);
      this.time=dateTimeStr.slice(11,dateTimeStr.length);
      this.week=getWeek();
    }
  },
  beforeDestroy() {
    this.timer&&clearInterval(this.timer);
  },
  mounted() {
    this.setDateTime()
    this.timer=setInterval(()=>{
      this.setDateTime()
    },1000);
  }
}
</script>
<style scoped lang="scss">
.header{
  width: 100%;
  height: 145px;
  position: fixed;
  background: url("~@/assets/images/header-background.png") no-repeat center;
  background-size: 100% 100%;
  z-index: 10;
  .header-block{
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 50px;
    .title{
      padding-top: 70px;
      width: 400px;
      text-align: center;
      color: #fff;
      font-family: 冷酷体;
      font-size: 42px;
      flex-grow: 0;
      cursor: pointer;
    }
    .info-block{
      flex-grow: 1;
      display: flex;
      align-items: center;
      color: #fff;
      font-size: 17px;
      flex-basis: 0;
      .area{
        margin-right: 30px;
      }
      .weather-icon{
        width: 32px;
        height: 32px;
        margin-right: 20px;
      }
      .weather-text{
        margin-right: 20px;
      }
    }
    .info-block:nth-child(3){
      justify-content: flex-end;
      .week{
        margin: 0 30px;
      }
    }
  }
  .menu-block{
    width: 100%;
    display: flex;
    padding: 0 60px;
    margin-top: 15px;
    .menu-list{
      flex-grow: 1;
      flex-basis: 0;
      display: flex;
      .menu-item{
        width: 170px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 15px;
        height: 45px;
        margin-right: 40px;
        position: relative;
        cursor: pointer;
      }
      .menu-item::after{
        content: "";
        position: absolute;
        inset:2px;
        border-radius: 11px 11px 0 11px;
        background: none;
        z-index: -1;
      }
      .menu-item.active::after{
        background:linear-gradient(to right, #22e3e7, #1c85fe);
      }
      .menu-item::before {
        content: "";
        position: absolute;
        inset: 0;
        padding: 2px;
        border-radius: 15px 15px 0 15px;
        background: linear-gradient(to right, #22e3e7, #1c85fe);
        -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        z-index: -1;
      }
    }
    .menu-list:nth-child(2){
      .menu-item::after{
        border-radius: 11px 11px 11px 0;
        background: none;
      }
      .menu-item.active::after{
        background:linear-gradient(to right, #1c85fe, #22e3e7);
      }
      .menu-item::before {
        padding: 2px;
        border-radius: 15px 15px 15px 0;
        background: linear-gradient(to right, #1c85fe, #22e3e7);
        z-index: -1;
      }
      .menu-item{
        margin-left: 40px;
        margin-right: 0;
      }
      justify-content: flex-end;
    }
  }
}
</style>
